<template>
  <div style="width: 1200px;margin: 0 auto;">
    <el-row :gutter="20">
      <!-- 左边18列-->
        <el-col :span="18">
          <el-card>
            <h1 style="color:orange;text-align: center;">{{content.title}}</h1>
            <p style="font-size: 12px;color: #666;text-align: center;">
              作者:{{content.nickname}} | 发布时间:{{content.createTime}} |阅读次数:{{content.viewCount}}
            </p>
            <el-divider></el-divider>

            <div v-if="content.type != 5">
              <el-card style="font-size: 12px;">
                <b style="color: #078df5">摘要:</b>
                {{content.brief}}
              </el-card>

              <div >
                <p v-html="content.content"></p>
              </div>
            </div>
            <div v-else>
              <video style="width: 100%"
                     :src="BASE_URL+content.videoUrl"
                     controls type="video/mp4"></video>

            </div>

          </el-card>

          <!--    评论相关      -->
          <el-card>
              <p>发布一条评论</p>
              <el-divider></el-divider>
              <el-row>
                <el-col :span="22">
                  <el-input v-model="comment.content" id="el_input" placeholder="情书评论的内容"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-button type="primary" @click="postComment()">发布</el-button>
                </el-col>

              </el-row>

             <!-- 评论列表       -->
             <el-row style="margin-top:10px;" :gutter="10" v-for="item in commentArr">
               <el-col :span="2">
                  <el-avatar :src="BASE_URL+item.imgUrl"></el-avatar>
               </el-col>
               <el-col :span="22">
                    <span style="color: orange;font-weight: bolder;">{{item.nickname}}:</span>
                    <p style="margin: 5px 0;">{{item.content}}</p>
                    <span style="font-size:12px;color:#666;">{{item.createTime}}</span>
               </el-col>
             </el-row>



          </el-card>

        </el-col>
        <!--  右边6列-->
      <el-col :span="6">
        <!--    作者相关的信息    -->
          <el-card  align="center">
            <div id="head_div"></div>
            <div style="position: relative;top: -50px;">
              <img :src="BASE_URL+content.userImgUrl"
                   style="width: 90px;height: 90px;border-radius: 90px;"/>
              <p style="font-weight: bolder;font-size: 20px;margin: 0;">{{content.nickname}}</p>
              <i class="el-icon-edit" style="margin-top: 20px;">本文作者</i><br>
              <i class="el-icon-time">{{content.userCreateTime}}</i>
            </div>
          </el-card>
        <!--    作者其他的文章    -->
        <el-card align="center" style="margin-top: 20px;margin-bottom: 20px;">
            <h3 style="text-align: left">作者其他的文章</h3>
            <el-divider></el-divider>
            <el-row :gutter="20" v-for="(item,i) in otherContentsArr">
              <el-col :span="10">
                <img :src="BASE_URL+item.imgUrl" height="70px" width="100px"/>
              </el-col>
              <el-col :span="14" style="position: relative;top: -10px;">
                  <p >{{item.title}}</p>
                  <i class="el-icon-time"></i>
                  <span>{{item.createTime}}</span>
              </el-col>
            </el-row>
        </el-card>

        <!--    热门文章   -->
        <el-card align="center">
          <h3 style="text-align: left">热门文章</h3>
          <el-divider></el-divider>
          <el-row :gutter="20" v-for="i in 4">

            <el-col :span="10">
              <img src="/imgs/a.jpg" height="70px"/>
            </el-col>
            <el-col :span="14" style="position: relative;top: -10px;">
              <p >伟哥是一种药</p>
              <i class="el-icon-time"></i>
              <span>2024/8/13</span>
            </el-col>
          </el-row>
        </el-card>


      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user:localStorage.user ? JSON.parse(localStorage.user):null,
      content:{},
      commentArr:[],
      comment:{},
      otherContentsArr:[],
      hotContentArr:[]
    }
  },
  methods: {
    updateViewCount(id) {
      //修改浏览量
      if(id != ''){
        let url = this.BASE_URL + '/v1/contents/'+id
        this.axios.put(url).then(
            res=>{
              if(res.data.code == 1){
                //修改前端展示的浏览量
                this.content = this.content.viewCount + 1

              }else{
                this.$message.error(res.data.msg)
              }
            }
        )
      }

    },
    getComments(id){
      if(id != ''){
        let url = this.BASE_URL + '/v1/comments/'+id
        this.axios.get(url).then(
            res=>{
              if(res.data.code == 1){

                this.commentArr = res.data.data

              }else{
                this.$message.error(res.data.msg)
              }
            }
        )
      }
    },
    postComment(){
      this.comment.contentId = this.content.id
      this.comment.userId = this.user.id
      let url = this.BASE_URL + '/v1/comments/save'
      let data = this.qs.stringify(this.comment)
      this.axios.post(url,data).then(
          res=>{
            if(res.data.code == 1){
              //发布完成后再去查询一次
              this.getComments(this.content.id)
            }else{
              this.$message.error(res.data.msg)
            }
          }
      )
    },
    getContents(){
      //获取作何其他的文章
      let url1 = this.BASE_URL + '/v1/contents/getContents?createBy='+this.content.createBy+'&id='+this.content.id
      console.log(url1)
      this.axios.get(url1).then(
          res=>{
            if(res.data.code == 1){

              this.otherContentsArr = res.data.data
              //console.log(this.content)

            }else{
              this.$message.error(res.data.msg)
            }
          }
      )
    }
  },
  mounted() {
    if (location.search.includes('id')){
      let id = new URLSearchParams(location.search).get('id')
      //console.log(id)
      let url = this.BASE_URL + '/v1/contents/'+id
      this.axios.get(url).then(
          res=>{
            if(res.data.code == 1){

              this.content = res.data.data
              //响应成功之后获取其他的文章
              this.getContents()

            }else{
              this.$message.error(res.data.msg)
            }
          }
      )

      this.updateViewCount(id)

      this.getComments(id)


    }






  }
}
</script>

<style scoped>
    #head_div{
      width: 300px;
      height: 100px;
      background-image: url("/public/imgs/avarbg.jpg");
      background-repeat: no-repeat;
      background-position: left;
      background-size: 245px 80px;

    }

</style>
